<template>
  <el-card class="stat-card" :class="{ 'has-trend': trend }">
    <div class="stat-content">
      <!-- 第一行：图标和趋势 -->
      <div class="stat-header">
        <div class="stat-icon" :style="{ backgroundColor: iconBg }">
          <el-icon :size="18" :color="iconColor">
            <component :is="icon" />
          </el-icon>
        </div>
        <div v-if="trend" class="stat-trend" :class="trendClass">
          <el-icon :size="12">
            <component :is="trendIcon" />
          </el-icon>
          <span>{{ trend }}</span>
        </div>
      </div>
      <!-- 第二行：数据和标签 -->
      <div class="stat-body">
        <div class="stat-text">{{ label }}：{{ formatValue(value) }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ArrowUp, ArrowDown, Minus } from '@element-plus/icons-vue'

interface Props {
  icon: any
  iconColor?: string
  iconBg?: string
  value: number | string
  label: string
  trend?: string
  trendType?: 'up' | 'down' | 'flat'
}

const props = withDefaults(defineProps<Props>(), {
  iconColor: '#fff',
  iconBg: '#409EFF',
  trendType: 'flat'
})

const formatValue = (val: number | string): string => {
  if (typeof val === 'number') {
    return val.toLocaleString()
  }
  return val
}

const trendClass = computed(() => {
  return {
    'trend-up': props.trendType === 'up',
    'trend-down': props.trendType === 'down',
    'trend-flat': props.trendType === 'flat'
  }
})

const trendIcon = computed(() => {
  switch (props.trendType) {
    case 'up':
      return ArrowUp
    case 'down':
      return ArrowDown
    default:
      return Minus
  }
})
</script>

<style lang="scss" scoped>
.stat-card {
  :deep(.el-card__body) {
    padding: 12px;
  }

  .stat-content {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .stat-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .stat-trend {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 10px;
        font-weight: 500;
        padding: 1px 4px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.04);

        &.trend-up {
          color: #67C23A;
          background-color: rgba(103, 194, 58, 0.1);
        }

        &.trend-down {
          color: #F56C6C;
          background-color: rgba(245, 108, 108, 0.1);
        }

        &.trend-flat {
          color: #909399;
          background-color: rgba(144, 147, 153, 0.1);
        }
      }
    }

    .stat-body {
      .stat-text {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    :deep(.el-card__body) {
      padding: 10px;
    }

    .stat-content {
      gap: 6px;

      .stat-header {
        .stat-icon {
          width: 28px;
          height: 28px;
        }

        .stat-trend {
          font-size: 9px;
          padding: 1px 3px;
        }
      }

      .stat-body {
        .stat-text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>